<template>
    <div>
        <div class="top">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>课程日志</span>
                <button class="tab_right tab_on_right" @click="this.$router.back()"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="this.reload()"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
        </div>
        <el-table
                :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                border
                style="width: 100%">
            <!-- 复选框 -->
            <el-table-column type="selection" align="center"/>
            <el-table-column prop="pcid" label="课程编号" width="180" align="center"/>
            <el-table-column prop="type" label="操作类型" align="center" :formatter="formatType"/>
            <el-table-column prop="userId" label="操作人id" align="center"/>
            <el-table-column prop="createDate" label="时间" align="center"/>
            <el-table-column prop="remark" label="备注" align="center"/>
        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page=currentPage
                :page-sizes=pageSizes
                :page-size= PageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=totalCount>
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name:"CourseLogs",
        data(){
            return{
                //表格中的数据
                tableData:[],
                //复选框
                multipleSelection: [],
                //分页
                currentPage:1,  // 默认显示第一条
                totalCount:0,   // 总条数，根据接口获取数据长度(注意：这里不能为空)
                pageSizes:[1,5,10,20],    // 个数选择器（可修改）
                PageSize:10,    // 默认每页显示的条数（可修改）
            }
        },
        methods:{
            //分页
            handleSizeChange(val){
                this.PageSize = val;
                this.currentPage = 1;
            },
            handleCurrentChange(val){
                this.currentPage = val;
            },
            //全查
            getAll(){
                this.$http.get("/log/getLogBylogType",{params:{logType : 2}})
                    .then(res => {
                        this.tableData = res.data.data;
                        this.totalCount = res.data.data.length;
                    })
            },
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 审核
            formatType(row){
                if (row.type == 1){
                    return "添加";
                } else if (row.type == 2){
                    return "修改";
                } else if (row.type == 3){
                    return "查看";
                } else if (row.type == 4){
                    return "删除";
                }
            }
        },
        mounted(){
            this.getAll()
        },
    }
</script>

<style scoped>
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_under{
        margin: 0px 0px 15px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
</style>